<template>
  <div
    ref="pageTitleRef"
    class="page-title-container"
    :style="{
      backgroundColor: themeStyle[theme].backgroundColor1,
      color: themeStyle[theme].textColor1
    }"
  >
    <div class="page-title-left">
      <img src="../../../src/assets/img/logo.png" alt="" />
    </div>
    <div class="page-title-center">
      <span>仿真软体</span>
    </div>
    <div class="page-title-right">
      <div class="icon-item" @click="handle('hide')">
        <svg-icon name="funHide" :color="themeStyle[theme].textColor1"></svg-icon>
      </div>
      <div v-if="isMax" class="icon-item" @click="handle('min')">
        <svg-icon name="funMaximize" :color="themeStyle[theme].textColor1"></svg-icon>
      </div>
      <div v-else class="icon-item" @click="handle('max')">
        <svg-icon name="funMinimize" :color="themeStyle[theme].textColor1"></svg-icon>
      </div>
      <div class="icon-item icon-close" @click="handle('close')">
        <svg-icon
          name="funClose"
          :color="themeStyle[theme].textColor1"
          hover-color="#fff"
        ></svg-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { storeToRefs } from 'pinia'
import { onMounted, ref, watch } from 'vue'

const styleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(styleStore)

const isMax = ref(false)
onMounted(() => {
  //监听主进程的窗口尺寸改变事件
  window.electron.ipcRenderer.on('winSizeChange', (e, data) => {
    if (data.size === 'max') {
      isMax.value = true
    } else {
      isMax.value = false
    }
  })

  changeTheme()
})
const pageTitleRef = ref<HTMLDivElement | null>(null)
watch(
  () => theme.value,
  () => {
    changeTheme()
  }
)

const changeTheme = (): void => {
  const hoverColor1 = themeStyle.value[theme.value].btnHoverColor1
  //设置--btnHoverColor
  pageTitleRef.value?.style.setProperty('--btnHoverColor', hoverColor1)
}

const handle = (type: string): void => {
  window.electron.ipcRenderer.send('winSize', type)
}
</script>

<style scoped lang="scss">
.page-title-container {
  height: 30px;
  width: 100%;
  -webkit-app-region: drag; /* 允许拖拽 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: $font-size-medium;
  --btnHoverColor: #eee;
  user-select: none;
  position: relative;

  .page-title-left {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    gap: 10px;
    img {
      width: 20px;
      height: 20px;
    }
  }

  .page-title-right {
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-app-region: no-drag; /* 允许拖拽 */
    .icon-item {
      width: 40px;
      height: 30px;
      cursor: pointer;
      &:hover {
        background-color: var(--btnHoverColor);
      }
    }

    .icon-close {
      &:hover {
        background-color: $close-button-hover-background-color;
      }
    }
  }
}
</style>
